
<!DOCTYPE HTML>
<html lang="" >
    <head>
        <meta charset="UTF-8">
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <title>数据图表 · GitBook</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="description" content="">
        <meta name="generator" content="GitBook 3.2.3">
        
        
        
    
    <link rel="stylesheet" href="../gitbook/style.css">

    
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-highlight/website.css">
                
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-search/search.css">
                
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-fontsettings/website.css">
                
            
        

    

    
        
    
        
    
        
    
        
    
        
    
        
    

        
    
    
    <meta name="HandheldFriendly" content="true"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../gitbook/images/apple-touch-icon-precomposed-152.png">
    <link rel="shortcut icon" href="../gitbook/images/favicon.ico" type="image/x-icon">

    
    <link rel="next" href="SELECTVIEWPANEL.html" />
    
    
    <link rel="prev" href="GANTT.html" />
    

    </head>
    <body>
        
<div class="book">
    <div class="book-summary">
        
            
<div id="book-search-input" role="search">
    <input type="text" placeholder="Type to search" />
</div>

            
                <nav role="navigation">
                


<ul class="summary">
    
    

    

    
        
        
    
        <li class="chapter " data-level="1.1" data-path="../">
            
                <a href="../">
            
                    
                    前言
            
                </a>
            

            
        </li>
    

    
        
        <li class="divider"></li>
        
        
    
        <li class="chapter " data-level="2.1" >
            
                <span>
            
                    
                    应用
            
                </span>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="2.1.1" data-path="../APPS/LOCALE.html">
            
                <a href="../APPS/LOCALE.html">
            
                    
                    国际化
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.1.2" data-path="../APPS/EXTENDED.html">
            
                <a href="../APPS/EXTENDED.html">
            
                    
                    快速介入
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.1.3" data-path="../APPS/STYLE.html">
            
                <a href="../APPS/STYLE.html">
            
                    
                    样式规划
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.1.4" data-path="../APPS/NAVG.html">
            
                <a href="../APPS/NAVG.html">
            
                    
                    导航模式
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.1.5" data-path="../APPS/TEMP.html">
            
                <a href="../APPS/TEMP.html">
            
                    
                    临时模式
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.1.6" data-path="../APPS/Theme.html">
            
                <a href="../APPS/Theme.html">
            
                    
                    应用主题
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.1.7" data-path="../APPS/NAVPARAM.html">
            
                <a href="../APPS/NAVPARAM.html">
            
                    
                    自定义导航参数
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.1.8" data-path="../APPS/VIEWMESSAGE.html">
            
                <a href="../APPS/VIEWMESSAGE.html">
            
                    
                    视图消息
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="2.2" >
            
                <span>
            
                    
                    视图
            
                </span>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="2.2.1" data-path="../VIEWS/EDITVIEW.html">
            
                <a href="../VIEWS/EDITVIEW.html">
            
                    
                    实体编辑视图
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.2.2" data-path="../VIEWS/EDITVIEWPAGE.html">
            
                <a href="../VIEWS/EDITVIEWPAGE.html">
            
                    
                    实体编辑视图(分页关系)
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.2.3" data-path="../VIEWS/EDITVIEWUPDOWN.html">
            
                <a href="../VIEWS/EDITVIEWUPDOWN.html">
            
                    
                    实体编辑视图(上下关系)
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.2.4" data-path="../VIEWS/EDITVIEWABOUT.html">
            
                <a href="../VIEWS/EDITVIEWABOUT.html">
            
                    
                    实体编辑视图(左右关系)
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.2.5" data-path="../VIEWS/MEDITVIEW.html">
            
                <a href="../VIEWS/MEDITVIEW.html">
            
                    
                    实体多表单编辑视图
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.2.6" data-path="../VIEWS/GRIDVIEW.html">
            
                <a href="../VIEWS/GRIDVIEW.html">
            
                    
                    实体表格视图
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.2.7" data-path="../VIEWS/GRIDEXPVIEW.html">
            
                <a href="../VIEWS/GRIDEXPVIEW.html">
            
                    
                    实体表格导航视图
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.2.8" data-path="../VIEWS/TABEXPVIEW.html">
            
                <a href="../VIEWS/TABEXPVIEW.html">
            
                    
                    实体分页导航视图
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.2.9" data-path="../VIEWS/EntityDataKanbanView.html">
            
                <a href="../VIEWS/EntityDataKanbanView.html">
            
                    
                    实体数据看板视图
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.2.10" data-path="../VIEWS/LISTVIEW.html">
            
                <a href="../VIEWS/LISTVIEW.html">
            
                    
                    实体列表视图
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.2.11" data-path="../VIEWS/LISTEXPVIEW.html">
            
                <a href="../VIEWS/LISTEXPVIEW.html">
            
                    
                    实体列表导航视图
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.2.12" data-path="../VIEWS/DATAVIEW.html">
            
                <a href="../VIEWS/DATAVIEW.html">
            
                    
                    实体数据视图
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.2.13" data-path="../VIEWS/OPTIONVIEW.html">
            
                <a href="../VIEWS/OPTIONVIEW.html">
            
                    
                    实体选项操作视图
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.2.14" data-path="../VIEWS/DATAVIEWEXPVIEW.html">
            
                <a href="../VIEWS/DATAVIEWEXPVIEW.html">
            
                    
                    实体卡片导航视图
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.2.15" data-path="../VIEWS/CALENDARVIEW.html">
            
                <a href="../VIEWS/CALENDARVIEW.html">
            
                    
                    实体日历视图
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.2.16" data-path="../VIEWS/DAREXPVIEW.html">
            
                <a href="../VIEWS/DAREXPVIEW.html">
            
                    
                    实体日历导航视图
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.2.17" data-path="../VIEWS/TREEVIEW.html">
            
                <a href="../VIEWS/TREEVIEW.html">
            
                    
                    实体树视图
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.2.18" data-path="../VIEWS/TREEEXPVIEW.html">
            
                <a href="../VIEWS/TREEEXPVIEW.html">
            
                    
                    实体树导航视图
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.2.19" data-path="../VIEWS/TREEGRIDEXVIEW.html">
            
                <a href="../VIEWS/TREEGRIDEXVIEW.html">
            
                    
                    实体树表格视图
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.2.20" data-path="../VIEWS/INDEXVIEW.html">
            
                <a href="../VIEWS/INDEXVIEW.html">
            
                    
                    应用首页视图
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.2.21" data-path="../VIEWS/AppKanBanView.html">
            
                <a href="../VIEWS/AppKanBanView.html">
            
                    
                    应用看板视图
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.2.22" data-path="../VIEWS/ENTITYKANBANVIEW.html">
            
                <a href="../VIEWS/ENTITYKANBANVIEW.html">
            
                    
                    实体看板视图
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.2.23" data-path="../VIEWS/GANTTVIEW.html">
            
                <a href="../VIEWS/GANTTVIEW.html">
            
                    
                    实体甘特图视图
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.2.24" data-path="../VIEWS/ENTITYCHARTVIEW.html">
            
                <a href="../VIEWS/ENTITYCHARTVIEW.html">
            
                    
                    实体图表视图
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.2.25" data-path="../VIEWS/ENTITYDATASELECTVIEW.html">
            
                <a href="../VIEWS/ENTITYDATASELECTVIEW.html">
            
                    
                    实体数据选择视图
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.2.26" data-path="../VIEWS/ENTITYSELECTGRIDVIEW.html">
            
                <a href="../VIEWS/ENTITYSELECTGRIDVIEW.html">
            
                    
                    实体选择表格视图
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.2.27" data-path="../VIEWS/ENTITYSELECTTREEVIEW.html">
            
                <a href="../VIEWS/ENTITYSELECTTREEVIEW.html">
            
                    
                    实体选择树视图
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.2.28" data-path="../VIEWS/INDEXPICKUPDATAVIEW.html">
            
                <a href="../VIEWS/INDEXPICKUPDATAVIEW.html">
            
                    
                    实体索引关系选择视图
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.2.29" data-path="../VIEWS/ENTITYWORKFLOWTABLEEXPVIEW.html">
            
                <a href="../VIEWS/ENTITYWORKFLOWTABLEEXPVIEW.html">
            
                    
                    实体工作流动态导航表格视图
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.2.30" data-path="../VIEWS/ENTITYWORKFLOWEDITVIEW.html">
            
                <a href="../VIEWS/ENTITYWORKFLOWEDITVIEW.html">
            
                    
                    实体工作流动态编辑视图
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.2.31" data-path="../VIEWS/LOGINVIEW.html">
            
                <a href="../VIEWS/LOGINVIEW.html">
            
                    
                    应用登录视图
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.2.32" data-path="../VIEWS/DATAUPLOADVIEW.html">
            
                <a href="../VIEWS/DATAUPLOADVIEW.html">
            
                    
                    应用数据导入视图
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.2.33" data-path="../VIEWS/REDIRECTVIEW.html">
            
                <a href="../VIEWS/REDIRECTVIEW.html">
            
                    
                    实体数据重定向视图
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.2.34" data-path="../VIEWS/CUSTOM.html">
            
                <a href="../VIEWS/CUSTOM.html">
            
                    
                    实体自定义视图
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.2.35" data-path="../VIEWS/WIZARDVIEW.html">
            
                <a href="../VIEWS/WIZARDVIEW.html">
            
                    
                    实体向导视图
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="2.3" >
            
                <span>
            
                    
                    部件
            
                </span>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="2.3.1" data-path="FORM.html">
            
                <a href="FORM.html">
            
                    
                    表单
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.3.2" data-path="GRID.html">
            
                <a href="GRID.html">
            
                    
                    表格
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.3.3" data-path="GRIDEXPBAR.html">
            
                <a href="GRIDEXPBAR.html">
            
                    
                    表格导航
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.3.4" data-path="SEARCHBAR.html">
            
                <a href="SEARCHBAR.html">
            
                    
                    搜索栏
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.3.5" data-path="SEARCHFORM.html">
            
                <a href="SEARCHFORM.html">
            
                    
                    搜索表单
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.3.6" data-path="DataKanBan.html">
            
                <a href="DataKanBan.html">
            
                    
                    数据看板
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.3.7" data-path="PortalComponents.html">
            
                <a href="PortalComponents.html">
            
                    
                    门户部件
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.3.8" data-path="TABEXPPANEL.html">
            
                <a href="TABEXPPANEL.html">
            
                    
                    分页导航面板
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.3.9" data-path="TABVIEWPANEL.html">
            
                <a href="TABVIEWPANEL.html">
            
                    
                    分页视图面板
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.3.10" data-path="APPMENU.html">
            
                <a href="APPMENU.html">
            
                    
                    应用菜单
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.3.11" data-path="LIST.html">
            
                <a href="LIST.html">
            
                    
                    列表
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.3.12" data-path="LISTEXPBAR.html">
            
                <a href="LISTEXPBAR.html">
            
                    
                    列表导航
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.3.13" data-path="PANEL.html">
            
                <a href="PANEL.html">
            
                    
                    面板
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.3.14" data-path="DATAVIEWCTRL.html">
            
                <a href="DATAVIEWCTRL.html">
            
                    
                    数据视图
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.3.15" data-path="DATAVIEWEXPBAR.html">
            
                <a href="DATAVIEWEXPBAR.html">
            
                    
                    卡片视图导航
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.3.16" data-path="DataRelationPage.html">
            
                <a href="DataRelationPage.html">
            
                    
                    数据关系分页
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.3.17" data-path="DATARELATIONFIELD.html">
            
                <a href="DATARELATIONFIELD.html">
            
                    
                    数据关系栏
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.3.18" data-path="CALENDAR.html">
            
                <a href="CALENDAR.html">
            
                    
                    日历部件
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.3.19" data-path="CALENDARTIMELINE.html">
            
                <a href="CALENDARTIMELINE.html">
            
                    
                    日历部件(时间轴)
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.3.20" data-path="CALENDAREXPBAR.html">
            
                <a href="CALENDAREXPBAR.html">
            
                    
                    日历导航
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.3.21" data-path="TREEEXPBAR.html">
            
                <a href="TREEEXPBAR.html">
            
                    
                    树导航
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.3.22" data-path="TREEVIEWUNIT.html">
            
                <a href="TREEVIEWUNIT.html">
            
                    
                    树视图
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.3.23" data-path="TREEGRID.html">
            
                <a href="TREEGRID.html">
            
                    
                    树表格
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.3.24" data-path="MULTIEDITVIEWPANEL.html">
            
                <a href="MULTIEDITVIEWPANEL.html">
            
                    
                    多编辑视图面板
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.3.25" data-path="KANBANVIEWUNIT.html">
            
                <a href="KANBANVIEWUNIT.html">
            
                    
                    看板视图
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.3.26" data-path="GANTT.html">
            
                <a href="GANTT.html">
            
                    
                    甘特图部件
            
                </a>
            

            
        </li>
    
        <li class="chapter active" data-level="2.3.27" data-path="DATACHART.html">
            
                <a href="DATACHART.html">
            
                    
                    数据图表
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.3.28" data-path="SELECTVIEWPANEL.html">
            
                <a href="SELECTVIEWPANEL.html">
            
                    
                    选择视图面板
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.3.29" data-path="WIZARDPANEL.html">
            
                <a href="WIZARDPANEL.html">
            
                    
                    向导面板
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.3.30" data-path="STATEWIZARDPANEL.html">
            
                <a href="STATEWIZARDPANEL.html">
            
                    
                    状态向导面板
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.3.31" data-path="CONTEXTMENU.html">
            
                <a href="CONTEXTMENU.html">
            
                    
                    上下文菜单
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.3.32" data-path="TOOLBAR.html">
            
                <a href="TOOLBAR.html">
            
                    
                    工具栏
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="2.4" >
            
                <span>
            
                    
                    编辑器
            
                </span>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="2.4.1" data-path="../EDITORS/BASIC.html">
            
                <a href="../EDITORS/BASIC.html">
            
                    
                    基础类
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.4.2" data-path="../EDITORS/SHOW.html">
            
                <a href="../EDITORS/SHOW.html">
            
                    
                    展示类
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.4.3" data-path="../EDITORS/SELECT.html">
            
                <a href="../EDITORS/SELECT.html">
            
                    
                    选择类
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.4.4" data-path="../EDITORS/TIME.html">
            
                <a href="../EDITORS/TIME.html">
            
                    
                    时间类
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.4.5" data-path="../EDITORS/FILEUPLOADlIST.html">
            
                <a href="../EDITORS/FILEUPLOADlIST.html">
            
                    
                    文件上传类
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.4.6" data-path="../EDITORS/DATASELECT.html">
            
                <a href="../EDITORS/DATASELECT.html">
            
                    
                    数据选择类
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.4.7" data-path="../EDITORS/AUTOCOMPLETELIST.html">
            
                <a href="../EDITORS/AUTOCOMPLETELIST.html">
            
                    
                    自动填充类
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="2.5" >
            
                <span>
            
                    
                    逻辑
            
                </span>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="2.5.1" data-path="../LOGIC/APPFUNC.html">
            
                <a href="../LOGIC/APPFUNC.html">
            
                    
                    应用功能
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.5.2" data-path="../LOGIC/ACTION.html">
            
                <a href="../LOGIC/ACTION.html">
            
                    
                    界面行为
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.5.3" data-path="../LOGIC/VIEWLOGIC.html">
            
                <a href="../LOGIC/VIEWLOGIC.html">
            
                    
                    视图逻辑
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="2.6" >
            
                <span>
            
                    
                    UI服务
            
                </span>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="2.6.1" data-path="../UISERVICE/CTRLSERVICE.html">
            
                <a href="../UISERVICE/CTRLSERVICE.html">
            
                    
                    部件服务
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.6.2" data-path="../UISERVICE/UISERVICE.html">
            
                <a href="../UISERVICE/UISERVICE.html">
            
                    
                    界面服务
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.6.3" data-path="../UISERVICE/AUTHSERVICE.html">
            
                <a href="../UISERVICE/AUTHSERVICE.html">
            
                    
                    权限服务
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.6.4" data-path="../UISERVICE/CODELISTSERVICE.html">
            
                <a href="../UISERVICE/CODELISTSERVICE.html">
            
                    
                    代码表服务
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.6.5" data-path="../UISERVICE/COUNTERSERVICE.html">
            
                <a href="../UISERVICE/COUNTERSERVICE.html">
            
                    
                    计数器服务
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.6.6" data-path="../UISERVICE/APPUTILSERVICE.html">
            
                <a href="../UISERVICE/APPUTILSERVICE.html">
            
                    
                    应用功能服务
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.6.7" data-path="../UISERVICE/VIEWMESSAGESERVICE.html">
            
                <a href="../UISERVICE/VIEWMESSAGESERVICE.html">
            
                    
                    视图消息服务
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="2.7" >
            
                <span>
            
                    
                    数据服务
            
                </span>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="2.7.1" data-path="../DATASERVICE/DATASERVICE.html">
            
                <a href="../DATASERVICE/DATASERVICE.html">
            
                    
                    数据服务
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="2.8" data-path="../APPS/PROBLEM.html">
            
                <a href="../APPS/PROBLEM.html">
            
                    
                    常见问题
            
                </a>
            

            
        </li>
    

    

    <li class="divider"></li>

    <li>
        <a href="https://www.gitbook.com" target="blank" class="gitbook-link">
            Published with GitBook
        </a>
    </li>
</ul>


                </nav>
            
        
    </div>

    <div class="book-body">
        
            <div class="body-inner">
                
                    

<div class="book-header" role="navigation">
    

    <!-- Title -->
    <h1>
        <i class="fa fa-circle-o-notch fa-spin"></i>
        <a href=".." >数据图表</a>
    </h1>
</div>




                    <div class="page-wrapper" tabindex="-1" role="main">
                        <div class="page-inner">
                            
<div id="book-search-results">
    <div class="search-noresults">
    
                                <section class="normal markdown-section">
                                
                                <h2 id="&#x6570;&#x636E;&#x56FE;&#x8868;"><a href="https://modelapi.ibizlab.cn/#/net/ibizsys/model/control/chart/IPSChart" target="_blank">&#x6570;&#x636E;&#x56FE;&#x8868;</a></h2>
<p>&#x6570;&#x636E;&#x56FE;&#x8868;&#x7528;&#x6765;&#x5448;&#x73B0;&#x6570;&#x636E;&#x7684;&#x53D8;&#x5316;&#x89C4;&#x5F8B;&#x7B49;&#xFF0C;&#x60A8;&#x53EF;&#x4EE5;&#x901A;&#x8FC7;&#x56FE;&#x8868;&#x5B9A;&#x4E49;&#x3001;&#x5750;&#x6807;&#x5B9A;&#x4E49;&#x4EE5;&#x53CA;&#x6570;&#x636E;&#x5E8F;&#x5217;&#x7684;&#x5B9A;&#x4E49;&#x6765;&#x5B8C;&#x6210;&#x56FE;&#x8868;&#x7684;&#x90E8;&#x4EF6;&#x3002;&#x6570;&#x636E;&#x56FE;&#x8868;(&#x65B0;)&#x90E8;&#x4EF6;&#x662F;&#x6570;&#x636E;&#x56FE;&#x8868;&#x90E8;&#x4EF6;&#x7684;&#x6269;&#x5C55;&#x63D2;&#x4EF6;&#xFF0C;&#x4E24;&#x8005;&#x529F;&#x80FD;&#x65E0;&#x533A;&#x522B;&#x53EA;&#x662F;&#x505A;&#x4E86;&#x517C;&#x5BB9;&#x5904;&#x7406;&#x95EE;&#x9898;&#xFF0C;&#x5176;&#x6269;&#x5C55;&#x6807;&#x8BC6;&#x4E3A;NEW&#x3002;</p>
<h2 id="&#x5448;&#x73B0;&#x6548;&#x679C;">&#x5448;&#x73B0;&#x6548;&#x679C;</h2>
<p><img src="images/DATACHART.png" alt="image-20201015110032464"></p>
<h2 id="&#x57FA;&#x7840;&#x7528;&#x6CD5;"><a href="http://demo.ibizlab.cn/ibizr7pfstdtempl/ibizvuer7/tree/master/@CONTROL/%E6%95%B0%E6%8D%AE%E5%9B%BE%E8%A1%A8" target="_blank">&#x57FA;&#x7840;&#x7528;&#x6CD5;</a></h2>
<h3 id="ui&#x7ED3;&#x6784;">UI&#x7ED3;&#x6784;</h3>
<table>
<thead>
<tr>
<th>&#x7F16;&#x53F7;</th>
<th>&#x529F;&#x80FD;</th>
<th>&#x6A21;&#x578B;</th>
<th>&#x8BF4;&#x660E;</th>
</tr>
</thead>
<tbody>
<tr>
<td>C270U0001</td>
<td>&#x6837;&#x5F0F;&#x8868;</td>
<td>getPSSysCss()</td>
<td>&#x6570;&#x636E;&#x56FE;&#x8868;&#x6837;&#x5F0F;</td>
</tr>
<tr>
<td>C270U0004</td>
<td>&#x81EA;&#x5B9A;&#x4E49;&#x63D2;&#x4EF6;</td>
<td>getRender()</td>
<td>&#x8BE6;&#x60C5;&#x53C2;&#x89C1;<a href="../APPS/EXTENDED.html">&#x5FEB;&#x901F;&#x4ECB;&#x5165;</a>&#x7BC7;</td>
</tr>
</tbody>
</table>
<h3 id="&#x884C;&#x4E3A;&#x903B;&#x8F91;">&#x884C;&#x4E3A;&#x903B;&#x8F91;</h3>
<table>
<thead>
<tr>
<th>&#x7F16;&#x53F7;</th>
<th>&#x529F;&#x80FD;</th>
<th>&#x5173;&#x952E;&#x8BCD;</th>
<th>&#x8BF4;&#x660E;</th>
</tr>
</thead>
<tbody>
<tr>
<td>C270L0001</td>
<td>&#x90E8;&#x4EF6;&#x52A0;&#x8F7D;&#x4E4B;&#x540E;</td>
<td>afterCreated</td>
<td>&#x83B7;&#x53D6;&#x89C6;&#x56FE;&#x7684;&#x72B6;&#x6001;&#x8BA2;&#x9605;&#x5BF9;&#x8C61;&#xFF0C;&#x6839;&#x636E;&#x5176;&#x901A;&#x77E5;&#x6D88;&#x606F;&#x6267;&#x884C;&#x76F8;&#x5E94;&#x7684;&#x884C;&#x4E3A;</td>
</tr>
<tr>
<td>C270L0002</td>
<td>&#x83B7;&#x53D6;&#x56FE;&#x8868;&#x6570;&#x636E;</td>
<td>load</td>
<td>&#x5904;&#x7406;&#x53C2;&#x6570;&#x629B;&#x51FA;beforeload&#x4E8B;&#x4EF6;&#xFF0C;&#x5408;&#x5E76;&#x53C2;&#x6570;&#x8C03;&#x7528;&#x90E8;&#x4EF6;&#x670D;&#x52A1;&#x5BF9;&#x8C61;&#x67E5;&#x8BE2;&#x6570;&#x636E;&#xFF0C;&#x5C06;&#x5B9E;&#x4F53;&#x6570;&#x636E;&#x96C6;&#x8F6C;&#x5316;&#x4E3A;&#x56FE;&#x8868;&#x6570;&#x636E;&#x96C6;&#x540E;&#x7ED8;&#x5236;&#x56FE;&#x8868;</td>
</tr>
<tr>
<td>C270L0003</td>
<td>&#x5B9E;&#x4F53;&#x6570;&#x636E;&#x96C6;&#x8F6C;&#x5316;&#x4E3A;&#x56FE;&#x8868;&#x6570;&#x636E;&#x96C6;</td>
<td>transformToBasicChartSetData</td>
<td>&#x83B7;&#x53D6;&#x56FE;&#x8868;&#x6240;&#x9700;&#x4EE3;&#x7801;&#x8868;&#xFF0C;&#x67E5;&#x8BE2;&#x96C6;&#x5408;&#x6620;&#x5C04;&#x56FE;&#x8868;&#x6570;&#x636E;&#x96C6;&#xFF0C;&#x8865;&#x5168;&#x56FE;&#x8868;&#x6570;&#x636E;&#x96C6;&#xFF0C;&#x5E8F;&#x5217;&#x4EE3;&#x7801;&#x8868;&#x5B58;&#x5728;&#x65F6;&#x8865;&#x5168;&#x5E8F;&#x5217;&#xFF0C;&#x6784;&#x5EFA;&#x56FE;&#x8868;&#x5E8F;&#x5217;&#x96C6;&#x5408;</td>
</tr>
<tr>
<td>C270L0004</td>
<td>&#x8865;&#x5168;&#x6570;&#x636E;&#x96C6;</td>
<td>completeDataSet</td>
<td>&#x6839;&#x636E;&#x5206;&#x7EC4;&#x5C5E;&#x6027;&#x548C;&#x4E0D;&#x540C;&#x7684;&#x5206;&#x7EC4;&#x6A21;&#x5F0F;&#x5BF9;&#x56FE;&#x8868;&#x6570;&#x636E;&#x96C6;&#x8865;&#x5168;</td>
</tr>
<tr>
<td>C270L0005</td>
<td>&#x6784;&#x5EFA;&#x56FE;&#x8868;&#x5E8F;&#x5217;&#x6570;&#x636E;&#x96C6;&#x5408;</td>
<td>transformToChartSeriesDataSet</td>
<td>&#x6839;&#x636E;&#x5355;&#x5E8F;&#x5217;&#x548C;&#x591A;&#x5E8F;&#x5217;&#x7684;&#x4E0D;&#x540C;&#x5904;&#x7406;&#x6570;&#x636E;&#xFF0C;&#x8FDB;&#x884C;&#x5206;&#x7EC4;&#x6C42;&#x548C;</td>
</tr>
<tr>
<td>C270L0006</td>
<td>&#x5206;&#x7EC4;&#x6C42;&#x548C;</td>
<td>groupAndAdd</td>
<td>&#x6839;&#x636E;&#x503C;&#x5C5E;&#x6027;&#x5BF9;&#x591A;&#x5E8F;&#x5217;&#x548C;&#x5355;&#x5E8F;&#x5217;&#x6C42;&#x548C;&#xFF0C;&#x8865;&#x5168;&#x7A7A;&#x767D;&#x5206;&#x7C7B;&#xFF0C;&#x5BF9;&#x6C42;&#x548C;&#x540E;&#x7684;&#x6570;&#x7EC4;&#x8FDB;&#x884C;&#x6392;&#x5E8F;&#xFF0C;&#x5BF9;&#x96F7;&#x8FBE;&#x56FE;&#x7684;&#x6570;&#x636E;&#x683C;&#x5F0F;&#x5904;&#x7406;</td>
</tr>
<tr>
<td>C270L0007</td>
<td>&#x6392;&#x5E8F;&#x6570;&#x7EC4;</td>
<td>sortReturnArray</td>
<td>&#x82E5;&#x5206;&#x7EC4;&#x5C5E;&#x6027;&#x6709;&#x4EE3;&#x7801;&#x8868;&#x5219;&#x4ECE;&#x4EE3;&#x7801;&#x8868;&#x4E2D;&#x83B7;&#x53D6;&#x6570;&#x636E;&#xFF0C;&#x82E5;&#x5206;&#x7EC4;&#x5C5E;&#x6027;&#x4E0D;&#x5B58;&#x5728;&#x4EE3;&#x7801;&#x8868;&#x5219;&#x6839;&#x636E;&#x5206;&#x7EC4;&#x6A21;&#x5F0F;&#x7684;&#x4E0D;&#x540C;&#x8FDB;&#x884C;&#x5904;&#x7406;</td>
</tr>
<tr>
<td>C270L0008</td>
<td>&#x6392;&#x5E8F;&#x5206;&#x7EC4;&#x6A21;&#x5F0F;&#x4E0B;&#x7684;&#x6570;&#x636E;&#x5904;&#x7406;</td>
<td>handleSortGroupData</td>
<td>&#x6392;&#x5E8F;&#x6570;&#x7EC4;&#x65F6;&#x9488;&#x5BF9;&#x5206;&#x7EC4;&#x4E3A;&#x5E74;&#x4EFD;&#x7684;&#x6570;&#x636E;&#x5904;&#x7406;</td>
</tr>
<tr>
<td>C270L0009</td>
<td>&#x8865;&#x5168;&#x65F6;&#x95F4;&#x7C7B;&#x578B;&#x6570;&#x636E;&#x96C6;</td>
<td>handleTimeData</td>
<td>&#x5BF9;&#x5206;&#x7EC4;&#x6A21;&#x5F0F;&#x4E3A;&#x65F6;&#x95F4;&#x7C7B;&#x578B;&#x7684;&#x6570;&#x636E;&#x96C6;&#x8865;&#x5168;&#xFF08;&#x5BF9;&#x5E74;&#x6708;&#x65E5;&#x5B63;&#x7B49;&#x5206;&#x522B;&#x5904;&#x7406;&#xFF09;</td>
</tr>
<tr>
<td>C270L0010</td>
<td>&#x83B7;&#x53D6;&#x6700;&#x5927;&#x503C;&#x6700;&#x5C0F;&#x503C;</td>
<td>getRangeData</td>
<td>&#x8865;&#x5168;&#x65F6;&#x95F4;&#x7C7B;&#x578B;&#x6570;&#x636E;&#x96C6;&#x65F6;&#xFF0C;&#x9488;&#x5BF9;&#x5B63;&#x5EA6;&#xFF0C;&#x6708;&#x4EFD;&#xFF0C;&#x5E74;&#x5468;&#x4E09;&#x79CD;&#x7C7B;&#x578B;&#x83B7;&#x53D6;&#x65F6;&#x95F4;&#x7684;&#x6700;&#x5927;&#x548C;&#x6700;&#x5C0F;&#x503C;</td>
</tr>
<tr>
<td>C270L0011</td>
<td>&#x8865;&#x5168;&#x4EE3;&#x7801;&#x8868;&#x7C7B;&#x578B;&#x6570;&#x636E;&#x96C6;</td>
<td>completeCodeList</td>
<td>&#x5BF9;&#x5206;&#x7EC4;&#x6A21;&#x5F0F;&#x4E3A;&#x4EE3;&#x7801;&#x8868;&#x7C7B;&#x578B;&#x7684;&#x6570;&#x636E;&#x96C6;&#x8865;&#x5168;</td>
</tr>
<tr>
<td>C270L0012</td>
<td>&#x5904;&#x7406;&#x5355;&#x4E2A;&#x5C5E;&#x6027;</td>
<td>handleSingleDataSetField</td>
<td>&#x5B58;&#x5728;&#x4EE3;&#x7801;&#x8868;&#x65F6;&#x81EA;&#x52A8;&#x8F6C;&#x5316;&#x503C;&#xFF0C;&#x4E0D;&#x5B58;&#x5728;&#x4EE3;&#x7801;&#x8868;&#x65F6;&#x6839;&#x636E;&#x5206;&#x7EC4;&#x6A21;&#x5F0F;&#x5904;&#x7406;&#x6570;&#x636E;</td>
</tr>
<tr>
<td>C270L0013</td>
<td>&#x83B7;&#x53D6;&#x56FE;&#x8868;&#x6240;&#x9700;&#x4EE3;&#x7801;&#x8868;</td>
<td>getChartAllCodeList</td>
<td>&#x4ECE;&#x5E8F;&#x5217;&#x6A21;&#x578B;&#x4E2D;&#x83B7;&#x53D6;&#x56FE;&#x8868;&#x6240;&#x9700;&#x6240;&#x6709;&#x4EE3;&#x7801;&#x8868;</td>
</tr>
<tr>
<td>C270L0014</td>
<td>&#x83B7;&#x53D6;&#x4EE3;&#x7801;&#x8868;</td>
<td>getCodeList</td>
<td>&#x6839;&#x636E;&#x4F20;&#x5165;&#x7684;&#x4EE3;&#x7801;&#x8868;&#x5BF9;&#x8C61;&#x83B7;&#x53D6;&#x4EE3;&#x7801;&#x8868;</td>
</tr>
<tr>
<td>C270L0015</td>
<td>&#x7ED8;&#x5236;&#x56FE;&#x8868;</td>
<td>drawCharts</td>
<td>echarts&#x56FE;&#x8868;&#x5BF9;&#x8C61;&#x5982;&#x4E0D;&#x5B58;&#x5728;&#x5219;&#x91CD;&#x65B0;&#x521D;&#x59CB;&#x5316;echarts&#xFF0C;&#x5904;&#x7406;&#x56FE;&#x8868;&#x53C2;&#x6570;&#x540E;&#x8FDB;&#x884C;&#x91CD;&#x7ED8;&#x5E76;&#x968F;&#x81EA;&#x9002;&#x5E94;&#x6D4F;&#x89C8;&#x5668;&#x7A97;&#x53E3;</td>
</tr>
<tr>
<td>C270L0016</td>
<td>&#x5904;&#x7406;&#x56FE;&#x8868;&#x53C2;&#x6570;</td>
<td>handleChartOPtion</td>
<td>&#x6839;&#x636E;&#x5E8F;&#x5217;&#x6A21;&#x578B;&#x5904;&#x7406;&#x53C2;&#x6570;&#xFF0C;&#x5E76;&#x5BF9;&#x975E;&#x96F7;&#x8FBE;&#x56FE;&#x8FDB;&#x884C;&#x53C2;&#x6570;&#x5904;&#x7406;&#xFF0C;&#x5C06;&#x5904;&#x7406;&#x540E;&#x7684;&#x53C2;&#x6570;&#x6574;&#x5408;&#x5230;&#x521D;&#x59CB;&#x5316;&#x56FE;&#x8868;&#x6240;&#x9700;&#x53C2;&#x6570;&#x4E2D;</td>
</tr>
</tbody>
</table>
<blockquote style="border-color: blue;"><p>&#x5E8F;&#x5217;&#x6A21;&#x578B;</p></blockquote>

<p>&#x56FE;&#x8868;&#x652F;&#x6301;&#x533A;&#x57DF;&#x56FE;(Area)&#xFF0C;&#x6761;&#x5F62;&#x56FE;(Bar)&#xFF0C;&#x6761;&#x5F62;&#x56FE;3D(&#x65E7;)(Bar3D)&#xFF0C;K&#x7EBF;&#x56FE;(Candlestick)&#xFF0C;&#x4EEA;&#x8868;&#x76D8;(Gauge)&#xFF0C;&#x6298;&#x7EBF;&#x56FE;(Line)&#xFF0C;&#x997C;&#x56FE;(Pie)&#xFF0C;&#x997C;&#x56FE;3D(&#x65E7;)(Pie3D)&#xFF0C;&#x96F7;&#x8FBE;&#x56FE;(Radar)&#xFF0C;&#x6563;&#x70B9;&#x56FE;(Scatter)&#xFF0C;&#x67F1;&#x72B6;&#x56FE;(Column)&#xFF0C;&#x6F0F;&#x6597;&#x56FE;(Funnel)&#xFF0C;&#x81EA;&#x5B9A;&#x4E49;(Custom) &#x8FD9;13&#x79CD;&#x5E8F;&#x5217;&#x7C7B;&#x578B;&#x3002;&#x5E73;&#x53F0;&#x914D;&#x7F6E;&#x540E;&#x4F1A;&#x5C06;&#x5BF9;&#x5E94;&#x7684;&#x5E8F;&#x5217;&#x6A21;&#x578B;&#x5728;seriesModel&#x4E2D;&#x53D1;&#x5E03;&#x51FA;&#x6765;&#x3002;</p>
<pre><code class="lang-typescript">    /**
     * &#x5E8F;&#x5217;&#x6A21;&#x578B;
     *
     * @type {}
     * @memberof ${srfclassname(&apos;${ctrl.name}&apos;)}Base
     */
    public  seriesModel:any = {
        &lt;#if ctrl.getPSDEChartSerieses()??&gt;
        &lt;#list ctrl.getPSDEChartSerieses() as chartSeries&gt;
        ${chartSeries.getName()?lower_case}:${P.getPartCode(chartSeries, &apos;SERIES_MODEL&apos;).code}&lt;#if chartSeries_has_next&gt;,&lt;/#if&gt;
        &lt;/#list&gt;
        &lt;/#if&gt;
    };
</code></pre>
<p>&#x5E8F;&#x5217;&#x6A21;&#x578B;&#x6709;6&#x79CD;&#xFF1A;&#x6298;&#x7EBF;&#x578B;(ChartLineSeries)&#xFF0C;&#x6F0F;&#x6597;&#x578B;(ChartFunnelSeries)&#xFF0C;&#x997C;&#x578B;(ChartPieSeries)&#xFF0C;&#x6761;&#x578B;(ChartBarSeries)&#xFF0C;&#x96F7;&#x8FBE;&#x578B;(ChartRadarSeries)&#x548C;&#x5176;&#x4ED6;(ChartLineSeries)&#xFF0C;&#x53D1;&#x5E03;&#x4EE3;&#x7801;&#x65F6;&#x4F1A;&#x6839;&#x636E;&#x5E73;&#x53F0;&#x914D;&#x7F6E;&#x7684;&#x5E8F;&#x5217;&#x7C7B;&#x578B;&#x521B;&#x5EFA;&#x4E0D;&#x540C;&#x7684;&#x56FE;&#x8868;&#x5E8F;&#x5217;&#x5BF9;&#x8C61;&#x3002;</p>
<p>&#x524D;6&#x79CD;&#x6A21;&#x578B;&#x53D1;&#x5E03;&#x4FE1;&#x606F;&#x5305;&#x542B;&#xFF1A;&#x53D1;&#x5E03;&#x5E8F;&#x5217;&#x540D;&#x79F0;&#xFF0C;&#x5E8F;&#x5217;&#x6807;&#x8BC6;&#x5C5E;&#x6027;&#xFF0C;&#x5206;&#x7C7B;&#x4EE3;&#x7801;&#x8868;&#x4FE1;&#x606F;&#xFF0C;&#x503C;&#x5C5E;&#x6027;&#xFF0C;&#x7D22;&#x5F15;&#x5BF9;&#x8C61;&#xFF0C;&#x56FE;&#x8868;&#x6570;&#x636E;&#x96C6;&#x5BF9;&#x8C61;&#x4FE1;&#x606F;&#xFF0C;&#x7528;&#x6237;&#x81EA;&#x5B9A;&#x4E49;&#x53C2;&#x6570;&#x4FE1;&#x606F;(&#x6807;&#x7B7E;&#xFF1A;label,&#x6807;&#x8BB0;&#xFF1A;labelLine,&#x6837;&#x5F0F;&#xFF1A;itemStyle,&#x91CD;&#x70B9;&#xFF1A;emphasis)&#xFF0C;&#x7ED3;&#x679C;&#x96C6;&#x884C;&#x5217;&#x6A21;&#x5F0F;&#xFF0C;&#x57FA;&#x7840;&#x914D;&#x7F6E;Json&#x5185;&#x5BB9;&#x7B49;&#x3002;&#x5176;&#x4E2D;&#x96F7;&#x8FBE;&#x578B;&#x4E0D;&#x4F1A;&#x53D1;&#x5E03;&#x7528;&#x6237;&#x81EA;&#x5B9A;&#x4E49;&#x53C2;&#x6570;&#x4FE1;&#x606F;(label,labelLine,itemStyle,emphasis)&#x3002;&#x53C2;&#x6570;&#x683C;&#x5F0F;&#x4E3A;<strong>ECX.xxx={yyy}</strong>&#xFF0C;&#x6BD4;&#x5982;&#xFF1A;<strong>ECX.label={show: true,position: &apos;outside&apos;}</strong> &#x3002;</p>
<pre><code class="lang-typescript">new ChartLineSeries({
    name:&apos;${item.name?lower_case}&apos;,
    &lt;#if item.getIdField()??&gt;seriesIdField:&quot;${item.getIdField()?lower_case}&quot;,&lt;/#if&gt;
    &lt;#if item.getSeriesField()??&gt;seriesNameField:&quot;${item.getSeriesField()?lower_case}&quot;,&lt;/#if&gt;
    categorField:&apos;${item.getCatalogField()?lower_case}&apos;,
    &lt;#if item.getCatalogPSCodeList()??&gt;&lt;#assign categorCodeList = item.getCatalogPSCodeList() /&gt;categorCodeList:{type:&apos;${categorCodeList.getCodeListType()}&apos;,tag:&apos;${categorCodeList.getCodeName()}&apos;,emptycode:&apos;empty&apos;,emptytext:&apos;${categorCodeList.getEmptyText()}&apos;},&lt;/#if&gt;
    &lt;#if item.getSeriesPSCodeList()??&gt;&lt;#assign seriesCodeList = item.getSeriesPSCodeList() /&gt;seriesCodeList:{type:&apos;${seriesCodeList.getCodeListType()}&apos;,tag:&apos;${seriesCodeList.getCodeName()}&apos;,emptycode:&apos;empty&apos;,emptytext:&apos;${seriesCodeList.getEmptyText()}&apos;},&lt;/#if&gt;
    valueField:&apos;${item.getValueField()?lower_case}&apos;,
    seriesValues:[],
    seriesIndex:${item.getIndex()},
    data:[],
    seriesMap:{},
    &lt;#if item.getPSChartDataSet()??&gt;
    &lt;#assign chartDataSet = item.getPSChartDataSet()/&gt;
    &lt;#if chartDataSet.getPSChartDataSetFields()??&gt;
    dataSetFields:[
    &lt;#list chartDataSet.getPSChartDataSetFields() as singleField&gt;
    {name:&quot;${singleField.getName()?lower_case}&quot;,codelist:&lt;#if singleField.getPSCodeList()??&gt;&lt;#assign codelist = singleField.getPSCodeList()/&gt;{type:&quot;${codelist.getCodeListType()}&quot;,tag:&quot;${codelist.getCodeName()}&quot;,emptycode:&apos;empty&apos;,emptytext:&apos;${codelist.getEmptyText()}&apos;}&lt;#else&gt;null&lt;/#if&gt;,isGroupField:${singleField.isGroupField()?c},groupMode:&quot;${singleField.getGroupMode()}&quot;}&lt;#if singleField_has_next&gt;,&lt;/#if&gt;
    &lt;/#list&gt;
    ],
    &lt;/#if&gt;
    &lt;/#if&gt;
    ecxObject:{
    &lt;#-- &#x5E8F;&#x5217;label start --&gt;
        &lt;#if item.containsUserParam(&quot;ECX.label&quot;)&gt;
        label:${item.getUserParam(&quot;ECX.label&quot;)},
        &lt;#else&gt;
        label:{
            show: true,
            position: &apos;inside&apos;
        },
        &lt;/#if&gt;
        &lt;#-- &#x5E8F;&#x5217;label end --&gt;
        &lt;#-- &#x5E8F;&#x5217;labelLine start --&gt;
        &lt;#if item.containsUserParam(&quot;ECX.labelLine&quot;)&gt;
        labelLine:${item.getUserParam(&quot;ECX.labelLine&quot;)},
        &lt;#else&gt;
        labelLine:{
            length: 10,
            lineStyle: {
                width: 1,
                type: &apos;solid&apos;
            }
        },
        &lt;/#if&gt;
        &lt;#-- &#x5E8F;&#x5217;labelLine end --&gt;
        &lt;#-- &#x5E8F;&#x5217;itemStyle start --&gt;
        &lt;#if item.containsUserParam(&quot;ECX.itemStyle&quot;)&gt;
        itemStyle:${item.getUserParam(&quot;ECX.itemStyle&quot;)},
        &lt;#else&gt;
        itemStyle:{
            borderColor: &apos;#fff&apos;,
            borderWidth: 1
        },
        &lt;/#if&gt;
        &lt;#-- &#x5E8F;&#x5217;itemStyle end --&gt;
        &lt;#-- &#x5E8F;&#x5217;emphasis start --&gt;
        &lt;#if item.containsUserParam(&quot;ECX.emphasis&quot;)&gt;
        emphasis:${item.getUserParam(&quot;ECX.emphasis&quot;)},
        &lt;#else&gt;
        emphasis:{
            label: {
                fontSize: 20
            }
        }
        &lt;/#if&gt;
        &lt;#-- &#x5E8F;&#x5217;emphasis end --&gt;
    },
    ecObject:{
        &lt;#if item.getUserParamNames()??&gt;
        &lt;#list item.getUserParamNames() as userparam&gt;
        &lt;#if userparam?index_of(&quot;EC.&quot;)==0&gt;
        ${userparam?remove_beginning(&quot;EC.&quot;)}:${item.getUserParam(userparam)},
        &lt;/#if&gt;
        &lt;/#list&gt;
        &lt;/#if&gt;
    },
    seriesTemp:{
        type:&apos;line&apos;,
        &lt;#if item.getBaseOptionJOString()??&gt;
        ${item.getBaseOptionJOString()}
        &lt;/#if&gt;
    },
    seriesLayoutBy:&quot;${item.getSeriesLayoutBy()}&quot;,
    baseOption:{
        &lt;#if item.getBaseOptionJOString()??&gt;
        ${item.getBaseOptionJOString()}
        &lt;/#if&gt;
    }
    })
</code></pre>
<p>&#x5176;&#x4ED6;&#x7C7B;&#x578B;&#x6A21;&#x578B;&#x53D1;&#x5E03;&#x4FE1;&#x606F;&#x5305;&#x542B;&#xFF1A;&#x53D1;&#x5E03;&#x5E8F;&#x5217;&#x540D;&#x79F0;&#xFF0C;&#x5206;&#x7C7B;&#x4EE3;&#x7801;&#x8868;&#x4FE1;&#x606F;&#x7B49;&#x3002;</p>
<pre><code class="lang-typescript">new ChartLineSeries(
    {name:&apos;${item.name?lower_case}&apos;,categorField:&apos;${item.getCatalogField()?lower_case}&apos;,
     &lt;#if item.getCatalogPSCodeList()??&gt;&lt;#assign categorCodeList = item.getCatalogPSCodeList() /&gt;categorCodeList:{type:&apos;${categorCodeList.getCodeListType()}&apos;,tag:&apos;${categorCodeList.getCodeName()}&apos;},&lt;/#if&gt;valueField:&apos;${item.getValueField()?lower_case}&apos;,
     data:[]}),
</code></pre>
<blockquote style="border-color: blue;"><p>&#x521D;&#x59CB;&#x5316;&#x56FE;&#x8868;&#x6240;&#x9700;&#x53C2;&#x6570;</p></blockquote>

<p>&#x5E73;&#x53F0;&#x914D;&#x7F6E;&#x7684;&#x56FE;&#x8868;&#x6807;&#x9898;&#xFF0C;&#x56FE;&#x4F8B;&#xFF0C;&#x7ED8;&#x56FE;&#x7F51;&#x683C;&#xFF0C;&#x96F7;&#x8FBE;&#x56FE;&#x5750;&#x6807;&#x7CFB;&#xFF0C;&#x5750;&#x6807;&#x8F74;(X&#x8F74;&#x548C;Y&#x8F74;)&#xFF0C;&#x63D0;&#x793A;&#x6846;&#xFF0C;&#x56FE;&#x8868;&#x6570;&#x636E;&#x96C6;&#xFF0C;&#x5E8F;&#x5217;&#x7B49;&#x53C2;&#x6570;&#x5C06;&#x4F1A;&#x53D1;&#x5E03;&#x5230;&#x521D;&#x59CB;&#x5316;&#x56FE;&#x8868;&#x6240;&#x9700;&#x53C2;&#x6570;chartOption&#x4E2D;&#x3002;</p>
<pre><code class="lang-typescript">    /**
     * &#x521D;&#x59CB;&#x5316;&#x56FE;&#x8868;&#x6240;&#x9700;&#x53C2;&#x6570;
     *
     * @type {}
     * @memberof ${srfclassname(&apos;${ctrl.name}&apos;)}Base
     */   
    public chartOption:any = {
        &lt;#-- &#x6807;&#x9898;start --&gt;
        &lt;#if ctrl.getPSDEChartTitle()??&gt;
        &lt;#assign title= ctrl.getPSDEChartTitle() /&gt;
        title:{
            show:&lt;#if title.isShowTitle()&gt;true&lt;#else&gt;false&lt;/#if&gt; ,
            text:&apos;&lt;#if title.getTitle()??&gt;${title.getTitle()}&lt;/#if&gt;&apos;,
            subtext:&apos;&lt;#if title.getSubTitle()??&gt;${title.getSubTitle()}&lt;/#if&gt;&apos;
        },
        &lt;/#if&gt;
        &lt;#-- &#x6807;&#x9898;end --&gt;
        &lt;#-- &#x56FE;&#x4F8B;start --&gt;
        &lt;#if ctrl.getPSDEChartLegend()??&gt;
        &lt;#assign legend= ctrl.getPSDEChartLegend() /&gt;
        legend:{
            show:&lt;#if legend.isShowLegend()&gt;true&lt;#else&gt;false&lt;/#if&gt;
        },
        &lt;/#if&gt;
        &lt;#-- &#x56FE;&#x4F8B;end --&gt;
        &lt;#-- &#x7ED8;&#x56FE;&#x7F51;&#x683C;start --&gt;
        &lt;#if ctrl.getPSChartGrids()??&gt;
        grid:[
            &lt;@ibizindent blank=8&gt;
            &lt;#list ctrl.getPSChartGrids() as chartGrid&gt;
            ${P.getPartCode(chartGrid).code}&lt;#if chartGrid_has_next&gt;,&lt;/#if&gt;
            &lt;/#list&gt;
            &lt;/@ibizindent&gt;
        ],
        &lt;/#if&gt;
        &lt;#-- &#x7ED8;&#x56FE;&#x7F51;&#x683C;end --&gt;
        &lt;#-- &#x96F7;&#x8FBE;&#x56FE;&#x5750;&#x6807;&#x7CFB;start --&gt;
        &lt;#if ctrl.getPSChartRadars?? &amp;&amp; ctrl.getPSChartRadars()??&gt;
        &lt;#list ctrl.getPSChartRadars() as chartRadar&gt;
        &lt;#if chartRadar_index == 0&gt;
        radar:{
            &lt;@ibizindent blank=8&gt;
            ${P.getPartCode(chartRadar).code}
            &lt;/@ibizindent&gt;
        },
        &lt;/#if&gt;
        &lt;/#list&gt;
        &lt;/#if&gt;
        &lt;#-- &#x96F7;&#x8FBE;&#x56FE;&#x5750;&#x6807;&#x7CFB;end --&gt;
        &lt;#-- X&#x8F74;start --&gt;
        &lt;#if ctrl.getPSChartXAxises()??&gt;
        xAxis: [
            &lt;@ibizindent blank=8&gt;
            &lt;#list ctrl.getPSChartXAxises() as chartXAxise&gt;
            ${P.getPartCode(chartXAxise).code}&lt;#if chartXAxise_has_next&gt;,&lt;/#if&gt;
            &lt;/#list&gt;
            &lt;/@ibizindent&gt;
        ],
        &lt;/#if&gt;
        &lt;#-- X&#x8F74;end --&gt;
        &lt;#-- Y&#x8F74;start --&gt;
        &lt;#if ctrl.getPSChartYAxises()??&gt;
        yAxis:[
            &lt;@ibizindent blank=8&gt;
            &lt;#list ctrl.getPSChartYAxises() as chartYAxise&gt;
            ${P.getPartCode(chartYAxise).code}&lt;#if chartYAxise_has_next&gt;,&lt;/#if&gt;
            &lt;/#list&gt;
            &lt;/@ibizindent&gt;
        ],
        &lt;/#if&gt;
        &lt;#-- Y&#x8F74;end --&gt;
        &lt;#-- &#x63D0;&#x793A;&#x6846;&#x7EC4;&#x4EF6;start --&gt;
        tooltip:{
            show:true
        },
        &lt;#-- &#x63D0;&#x793A;&#x6846;&#x7EC4;&#x4EF6;end --&gt;
        &lt;#-- &#x6570;&#x636E;&#x96C6;start --&gt;
        dataset:[],
        &lt;#-- &#x6570;&#x636E;&#x96C6;end --&gt;
        &lt;#-- &#x5E8F;&#x5217;start --&gt;
        series:[
            &lt;@ibizindent blank=8&gt;
            &lt;#list ctrl.getPSDEChartSerieses() as chartSeriese&gt;
             ${P.getPartCode(chartSeriese).code}&lt;#if chartSeriese_has_next&gt;,&lt;/#if&gt;
            &lt;/#list&gt;
            &lt;/@ibizindent&gt;
        ]
        &lt;#-- &#x5E8F;&#x5217;end --&gt;
    };
</code></pre>
<p>&#x7ED8;&#x56FE;&#x7F51;&#x683C;&#xFF1A;&#x53D1;&#x5E03;&#x81EA;&#x5B9A;&#x4E49;&#x7ED8;&#x56FE;&#x7F51;&#x683C;&#x6216;&#x8005;&#x53D1;&#x5E03;&#x7ED8;&#x56FE;&#x7F51;&#x683C;&#x7684;&#x57FA;&#x7840;&#x914D;&#x7F6E;Json&#x5185;&#x5BB9;&#x3002;</p>
<pre><code class="lang-typescript">&lt;#-- &#x7ED8;&#x56FE;&#x7F51;&#x683C;start --&gt;
&lt;#if item.render??&gt;
${item.render.code}
&lt;#else&gt;
{
&lt;#if item.getBaseOptionJOString()??&gt;
${item.getBaseOptionJOString()}
&lt;/#if&gt;
}
&lt;/#if&gt;
&lt;#-- &#x7ED8;&#x56FE;&#x7F51;&#x683C;end --&gt;
</code></pre>
<p>&#x96F7;&#x8FBE;&#x56FE;&#x5750;&#x6807;&#x7CFB;&#xFF1A;&#x53D1;&#x5E03;&#x81EA;&#x5B9A;&#x4E49;&#x96F7;&#x8FBE;&#x56FE;&#x5750;&#x6807;&#x7CFB;&#x6216;&#x8005;&#x53D1;&#x5E03;&#x6307;&#x793A;&#x5668;&#x4EE3;&#x7801;&#x8868;&#x4EE3;&#x7801;&#x9879;&#x96C6;&#x5408;&#x3002;</p>
<pre><code class="lang-typescript">&lt;#-- &#x96F7;&#x8FBE;&#x56FE;&#x5750;&#x6807;&#x7CFB;start --&gt;
&lt;#if item.render??&gt;
${item.render.code}
&lt;#else&gt;
&lt;#if item.getIndicatorPSCodeList?? &amp;&amp; item.getIndicatorPSCodeList()??&gt;
&lt;#assign indicatorCodeList = item.getIndicatorPSCodeList() /&gt;
indicator:[
&lt;#list indicatorCodeList.getAllPSCodeItems() as codeItem&gt;
{name:&apos;${codeItem.getText()}&apos;,max:${codeItem.getUserParam(&apos;MAXVALUE&apos;,100)}}&lt;#if codeItem_has_next&gt;,&lt;/#if&gt;
&lt;/#list&gt;
]
&lt;/#if&gt;
&lt;/#if&gt;
&lt;#-- &#x96F7;&#x8FBE;&#x56FE;&#x5750;&#x6807;&#x7CFB;end --&gt;
</code></pre>
<p>&#x5750;&#x6807;&#x8F74;(X&#x8F74;,Y&#x8F74;)&#xFF1A;&#x53D1;&#x5E03;&#x81EA;&#x5B9A;&#x4E49;&#x5750;&#x6807;&#x8F74;&#x6216;&#x8005;&#x53D1;&#x5E03;&#x5750;&#x6807;&#x8F74;&#x7684;&#x5BF9;&#x8C61;&#x7D22;&#x5F15;&#xFF0C;&#x4F4D;&#x7F6E;&#xFF0C;&#x7C7B;&#x578B;&#xFF0C;&#x6807;&#x9898;&#xFF0C;&#x57FA;&#x7840;&#x914D;&#x7F6E;Json&#x5185;&#x5BB9;&#x7B49;&#x4FE1;&#x606F;&#x3002;</p>
<pre><code class="lang-typescript">&lt;#-- &#x7ED8;&#x56FE;X&#x8F74; --&gt;
&lt;#if item.render??&gt;
${item.render.code}
&lt;#else&gt;
{
      &lt;#if item.getIndex()??&gt;gridIndex:${item.getIndex()},&lt;/#if&gt;
      position:&lt;#if item.getPosition()?? &amp;&amp; item.getPosition() ==&apos;bottom&apos;&gt;&quot;bottom&quot;&lt;#else&gt;&quot;top&quot;&lt;/#if&gt;,
      type:&lt;#if item.getEChartsType()??&gt;&apos;${item.getEChartsType()}&apos;&lt;#else&gt;&apos;category&apos;&lt;/#if&gt;,
      name:&lt;#if item.getCaption()??&gt;&apos;${item.getCaption()}&apos;&lt;/#if&gt;,
      &lt;#if item.getMinValue()??&gt;min:${item.getMinValue()},&lt;/#if&gt;
      &lt;#if item.getMaxValue()??&gt;max:${item.getMaxValue()},&lt;/#if&gt;
      &lt;#if item.getUserParamNames()??&gt;
      &lt;#list item.getUserParamNames() as userparam&gt;
      &lt;#if userparam?index_of(&quot;EC.&quot;)==0&gt;
      ${userparam?remove_beginning(&quot;EC.&quot;)}:${item.getUserParam(userparam)}&lt;#if userparam_has_next&gt;,&lt;/#if&gt;
      &lt;/#if&gt;
      &lt;/#list&gt;
      &lt;/#if&gt;
      &lt;#if item.getBaseOptionJOString()??&gt;
      ${item.getBaseOptionJOString()}
      &lt;/#if&gt;
}
&lt;/#if&gt;
&lt;#-- &#x7ED8;&#x56FE;Y&#x8F74; --&gt;
&lt;#if item.render??&gt;
${item.render.code}
&lt;#else&gt;
{
      &lt;#if item.getIndex()??&gt;gridIndex:${item.getIndex()},&lt;/#if&gt;
      position:&lt;#if item.getPosition()?? &amp;&amp; item.getPosition() ==&apos;bottom&apos;&gt;&quot;bottom&quot;&lt;#else&gt;&quot;top&quot;&lt;/#if&gt;,
      type:&lt;#if item.getEChartsType()??&gt;&apos;${item.getEChartsType()}&apos;&lt;#else&gt;&apos;value&apos;&lt;/#if&gt;,
      name:&lt;#if item.getCaption()??&gt;&apos;${item.getCaption()}&apos;&lt;/#if&gt;,
      &lt;#if item.getMinValue()??&gt;min:${item.getMinValue()},&lt;/#if&gt;
      &lt;#if item.getMaxValue()??&gt;max:${item.getMaxValue()},&lt;/#if&gt;
      &lt;#if item.getUserParamNames()??&gt;
      &lt;#list item.getUserParamNames() as userparam&gt;
      &lt;#if userparam?index_of(&quot;EC.&quot;)==0&gt;
      ${userparam?remove_beginning(&quot;EC.&quot;)}:${item.getUserParam(userparam)}&lt;#if userparam_has_next&gt;,&lt;/#if&gt;
      &lt;/#if&gt;
      &lt;/#list&gt;
      &lt;/#if&gt;
      &lt;#if item.getBaseOptionJOString()??&gt;
      ${item.getBaseOptionJOString()}
      &lt;/#if&gt;
}
&lt;/#if&gt;
</code></pre>
<p>&#x5E8F;&#x5217;&#xFF1A;&#x53D1;&#x5E03;&#x81EA;&#x5B9A;&#x4E49;&#x5E8F;&#x5217;&#x53C2;&#x6570;&#x6216;&#x8005;&#x9884;&#x7F6E;&#x7684;&#x5E8F;&#x5217;&#x53C2;&#x6570;&#x3002;</p>
<p>&#x6761;&#x5F62;&#x56FE;&#x5E8F;&#x5217;&#x53C2;&#x6570;&#xFF1A;&#x5E8F;&#x5217;&#x540D;&#x79F0;&#xFF0C;&#x5E8F;&#x5217;&#x6807;&#x9898;&#xFF0C;&#x7C7B;&#x578B;&#xFF0C;&#x5E8F;&#x5217;&#x6620;&#x5C04;&#x7684;&#x5750;&#x6807;&#x8F74;&#x7D22;&#x5F15;&#xFF0C;&#x5E8F;&#x5217;&#x6620;&#x5C04;&#x6570;&#x636E;&#x96C6;&#x7D22;&#x5F15;&#xFF0C;&#x56FE;&#x8868;&#x5E8F;&#x5217;&#x7F16;&#x7801;&#xFF0C;&#x57FA;&#x7840;&#x914D;&#x7F6E;Json&#x5185;&#x5BB9;&#x3002;</p>
<pre><code class="lang-typescript">{
    id:&apos;&lt;#if item.getName()??&gt;${item.getName()?lower_case}&lt;/#if&gt;&apos;,
    name:&apos;&lt;#if item.getCaption()??&gt;${item.getCaption()}&lt;/#if&gt;&apos;,
    type:&apos;bar&apos;,
    xAxisIndex:&lt;@getXIndex item /&gt;,
    yAxisIndex:&lt;@getYIndex item /&gt;,
    datasetIndex:&lt;@getDataSetIndex item /&gt;,
    encode: {
        &lt;#if item.getPSChartSeriesEncode()??&gt;&lt;#assign chartSeriesEncode = item.getPSChartSeriesEncode() /&gt;&lt;/#if&gt;
        x: [&lt;#if chartSeriesEncode.getX()??&gt;&lt;#list chartSeriesEncode.getX() as xValue&gt;&apos;${xValue?lower_case}&apos;&lt;#if xValue_has_next&gt;,&lt;/#if&gt;&lt;/#list&gt;&lt;/#if&gt;],      
        y: [&lt;#if chartSeriesEncode.getY()??&gt;&lt;#list chartSeriesEncode.getY() as yValue&gt;&apos;${yValue?lower_case}&apos;&lt;#if yValue_has_next&gt;,&lt;/#if&gt;&lt;/#list&gt;&lt;/#if&gt;]
    }&lt;#if item.getBaseOptionJOString()??&gt;,
    ${item.getBaseOptionJOString()}
    &lt;/#if&gt;
}
</code></pre>
<p>&#x6F0F;&#x6597;&#x56FE;&#x5E8F;&#x5217;&#x53C2;&#x6570;&#xFF1A;&#x5E8F;&#x5217;&#x540D;&#x79F0;&#xFF0C;&#x5E8F;&#x5217;&#x6807;&#x9898;&#xFF0C;&#x7C7B;&#x578B;&#xFF0C;&#x5E8F;&#x5217;&#x6620;&#x5C04;&#x6570;&#x636E;&#x96C6;&#x7D22;&#x5F15;&#xFF0C;&#x7ED3;&#x679C;&#x96C6;&#x884C;&#x5217;&#x6A21;&#x5F0F;&#xFF0C;&#x56FE;&#x8868;&#x5E8F;&#x5217;&#x7F16;&#x7801;&#xFF0C;&#x57FA;&#x7840;&#x914D;&#x7F6E;Json&#x5185;&#x5BB9;&#x3002;</p>
<pre><code class="lang-typescript">{
    id:&apos;&lt;#if item.getName()??&gt;${item.getName()?lower_case}&lt;/#if&gt;&apos;,
    name:&apos;&lt;#if item.getCaption()??&gt;${item.getCaption()}&lt;/#if&gt;&apos;,
    type:&apos;funnel&apos;,
    datasetIndex:&lt;@getDataSetIndex item /&gt;,
    &lt;#compress&gt;&lt;#if item.getLeft()??&gt;left:&quot;${item.getLeft()}&quot;,&lt;/#if&gt;
    &lt;#if item.getTop()??&gt;top:&quot;${item.getTop()}&quot;,&lt;/#if&gt;
    &lt;#if item.getBottom()??&gt;bottom:&quot;${item.getBottom()}&quot;,&lt;/#if&gt;
    &lt;#if item.getRight()??&gt;right:&quot;${item.getRight()}&quot;,&lt;/#if&gt;
    &lt;#if item.getWidth()??&gt;width:&quot;${item.getWidth()}&quot;,&lt;/#if&gt;
    &lt;#if item.getHeight()??&gt;height:&quot;${item.getHeight()}&quot;,&lt;/#if&gt;
    &lt;#if item.getMinValue()??&gt;min:&quot;${item.getMinValue()}&quot;,&lt;/#if&gt;
    &lt;#if item.getMaxValue()??&gt;max:&quot;${item.getMaxSize()}&quot;,&lt;/#if&gt;
    &lt;#if item.getMinSize()??&gt;minSize:&quot;${item.getMinSize()}&quot;,&lt;/#if&gt;
    &lt;#if item.getMaxSize()??&gt;maxSize: &quot;${item.getMaxSize()}&quot;,&lt;/#if&gt;
    &lt;#if item.getFunnelAlign()??&gt;funnelAlign:&quot;${item.getFunnelAlign()}&quot;,&lt;/#if&gt;&lt;/#compress&gt;
    seriesLayoutBy:&quot;${item.getSeriesLayoutBy()}&quot;,
    encode:{
        &lt;#if item.getPSChartSeriesEncode()??&gt;&lt;#assign chartSeriesEncode = item.getPSChartSeriesEncode() /&gt;&lt;/#if&gt;
        itemName:&quot;&lt;#if chartSeriesEncode.getCategory()??&gt;${chartSeriesEncode.getCategory()?lower_case}&lt;#else&gt;${item.getCatalogField()?lower_case}&lt;/#if&gt;&quot;,
        value:&quot;&lt;#if chartSeriesEncode.getValue()??&gt;${chartSeriesEncode.getValue()?lower_case}&lt;#else&gt;${item.getValueField()?lower_case}&lt;/#if&gt;&quot;
    }&lt;#if item.getBaseOptionJOString()??&gt;,
    ${item.getBaseOptionJOString()}
    &lt;/#if&gt;
}
</code></pre>
<p>&#x6298;&#x7EBF;&#x56FE;&#x5E8F;&#x5217;&#x53C2;&#x6570;&#xFF1A;&#x5E8F;&#x5217;&#x540D;&#x79F0;&#xFF0C;&#x5E8F;&#x5217;&#x6807;&#x9898;&#xFF0C;&#x7C7B;&#x578B;&#xFF0C;&#x5E8F;&#x5217;&#x6620;&#x5C04;&#x7684;&#x5750;&#x6807;&#x8F74;&#x7D22;&#x5F15;&#xFF0C;&#x5E8F;&#x5217;&#x6620;&#x5C04;&#x6570;&#x636E;&#x96C6;&#x7D22;&#x5F15;&#xFF0C;&#x56FE;&#x8868;&#x5E8F;&#x5217;&#x7F16;&#x7801;&#xFF0C;&#x57FA;&#x7840;&#x914D;&#x7F6E;Json&#x5185;&#x5BB9;&#x3002;</p>
<pre><code class="lang-typescript">{
    id:&apos;&lt;#if item.getName()??&gt;${item.getName()?lower_case}&lt;/#if&gt;&apos;,
    name:&apos;&lt;#if item.getCaption()??&gt;${item.getCaption()}&lt;/#if&gt;&apos;,
    type:&apos;line&apos;,
    xAxisIndex:&lt;@getXIndex item /&gt;,
    yAxisIndex:&lt;@getYIndex item /&gt;,
    datasetIndex:&lt;@getDataSetIndex item /&gt;,
    encode: {
        &lt;#if item.getPSChartSeriesEncode()??&gt;&lt;#assign chartSeriesEncode = item.getPSChartSeriesEncode() /&gt;&lt;/#if&gt;
        x: [&lt;#if chartSeriesEncode.getX()??&gt;&lt;#list chartSeriesEncode.getX() as xValue&gt;&apos;${xValue?lower_case}&apos;&lt;#if xValue_has_next&gt;,&lt;/#if&gt;&lt;/#list&gt;&lt;/#if&gt;],      
        y: [&lt;#if chartSeriesEncode.getY()??&gt;&lt;#list chartSeriesEncode.getY() as yValue&gt;&apos;${yValue?lower_case}&apos;&lt;#if yValue_has_next&gt;,&lt;/#if&gt;&lt;/#list&gt;&lt;/#if&gt;]
    }&lt;#if item.getBaseOptionJOString()??&gt;,
    ${item.getBaseOptionJOString()}
    &lt;/#if&gt;
}
</code></pre>
<p>&#x997C;&#x56FE;&#x5E8F;&#x5217;&#x53C2;&#x6570;&#xFF1A;&#x5E8F;&#x5217;&#x540D;&#x79F0;&#xFF0C;&#x5E8F;&#x5217;&#x6807;&#x9898;&#xFF0C;&#x7C7B;&#x578B;&#xFF0C;&#x5E8F;&#x5217;&#x6620;&#x5C04;&#x6570;&#x636E;&#x96C6;&#x7D22;&#x5F15;&#xFF0C;&#x7ED3;&#x679C;&#x96C6;&#x884C;&#x5217;&#x6A21;&#x5F0F;&#xFF0C;&#x56FE;&#x8868;&#x5E8F;&#x5217;&#x7F16;&#x7801;&#xFF0C;&#x57FA;&#x7840;&#x914D;&#x7F6E;Json&#x5185;&#x5BB9;&#x3002;</p>
<pre><code class="lang-typescript">{
    id:&apos;&lt;#if item.getName()??&gt;${item.getName()?lower_case}&lt;/#if&gt;&apos;,
    name:&apos;&lt;#if item.getCaption()??&gt;${item.getCaption()}&lt;/#if&gt;&apos;,
    type:&apos;pie&apos;,
    datasetIndex:&lt;@getDataSetIndex item /&gt;,
    &lt;#compress&gt;&lt;#if item.getLeft()??&gt;left:&quot;${item.getLeft()}&quot;,&lt;/#if&gt;
    &lt;#if item.getTop()??&gt;top:&quot;${item.getTop()}&quot;,&lt;/#if&gt;
    &lt;#if item.getBottom()??&gt;bottom:&quot;${item.getBottom()}&quot;,&lt;/#if&gt;
    &lt;#if item.getRight()??&gt;right:&quot;${item.getRight()}&quot;,&lt;/#if&gt;
    &lt;#if item.getWidth()??&gt;width:&quot;${item.getWidth()}&quot;,&lt;/#if&gt;
    &lt;#if item.getHeight()??&gt;height:&quot;${item.getHeight()}&quot;,&lt;/#if&gt;&lt;/#compress&gt;
    seriesLayoutBy:&quot;${item.getSeriesLayoutBy()}&quot;,
    encode:{
        &lt;#if item.getPSChartSeriesEncode()??&gt;&lt;#assign chartSeriesEncode = item.getPSChartSeriesEncode() /&gt;&lt;/#if&gt;
        itemName:&quot;&lt;#if chartSeriesEncode.getCategory()??&gt;${chartSeriesEncode.getCategory()?lower_case}&lt;#else&gt;${item.getCatalogField()?lower_case}&lt;/#if&gt;&quot;,
        value:&quot;&lt;#if chartSeriesEncode.getValue()??&gt;${chartSeriesEncode.getValue()?lower_case}&lt;#else&gt;${item.getValueField()?lower_case}&lt;/#if&gt;&quot;
    }&lt;#if item.getBaseOptionJOString()??&gt;,
    ${item.getBaseOptionJOString()}
    &lt;/#if&gt;
}
</code></pre>
<p>&#x96F7;&#x8FBE;&#x56FE;&#x5E8F;&#x5217;&#x53C2;&#x6570;&#xFF1A;&#x5E8F;&#x5217;&#x540D;&#x79F0;&#xFF0C;&#x5E8F;&#x5217;&#x6807;&#x9898;&#xFF0C;&#x7C7B;&#x578B;&#xFF0C;&#x57FA;&#x7840;&#x914D;&#x7F6E;Json&#x5185;&#x5BB9;&#x3002;</p>
<pre><code class="lang-typescript">{
    id:&apos;&lt;#if item.getName()??&gt;${item.getName()?lower_case}&lt;/#if&gt;&apos;,
    name:&apos;&lt;#if item.getCaption()??&gt;${item.getCaption()}&lt;/#if&gt;&apos;,
    type:&apos;radar&apos;,
    encode:{
        itemName:&quot;type&quot;
    }&lt;#if item.getBaseOptionJOString()??&gt;,
    ${item.getBaseOptionJOString()}
    &lt;/#if&gt;
}
</code></pre>
<blockquote style="border-color: blue;"><p>&#x7528;&#x6237;&#x81EA;&#x5B9A;&#x4E49;&#x53C2;&#x6570;</p></blockquote>

<p>&#x7528;&#x6237;&#x6269;&#x5C55;&#x4E2D;&#x7684;&#x81EA;&#x5B9A;&#x4E49;&#x53C2;&#x6570;&#x5C06;&#x4F1A;&#x53D1;&#x5E03;&#x5230;&#x56FE;&#x8868;&#x81EA;&#x5B9A;&#x4E49;&#x53C2;&#x6570;&#x96C6;&#x5408;chartUserParams&#x4E2D;&#x3002;&#x5176;&#x4E2D;&#x81EA;&#x5B9A;&#x4E49;&#x53C2;&#x6570;&#x683C;&#x5F0F;&#x4E3A; <strong>EC.xxx = yyy</strong> ,<strong>xxx</strong>&#x4E3A;&#x60F3;&#x8981;&#x81EA;&#x5B9A;&#x4E49;&#x7684;&#x56FE;&#x8868;&#x53C2;&#x6570;&#x5B57;&#x6BB5;&#x540D;&#xFF0C;<strong>yyy</strong>&#x4E3A;&#x81EA;&#x5B9A;&#x4E49;&#x53C2;&#x6570;&#xFF1B;&#x5982;&#x81EA;&#x5B9A;&#x4E49;&#x56FE;&#x4F8B;&#x8DDD;&#x6807;&#x9898;&#x9AD8;&#x4E3A;25&#xFF0C;&#x53C2;&#x6570;&#x683C;&#x5F0F;&#x4E3A;<strong>EC.legend={ top: &quot;25px&quot; }</strong>&#x3002;</p>
<pre><code class="lang-typescript">    /**
     * &#x56FE;&#x8868;&#x81EA;&#x5B9A;&#x4E49;&#x53C2;&#x6570;&#x96C6;&#x5408;
     *
     * @memberof ${srfclassname(&apos;${ctrl.name}&apos;)}Base
     */   
    public chartUserParams:any ={
        &lt;#if ctrl.getUserParamNames()??&gt;
        &lt;#list ctrl.getUserParamNames() as userparam&gt;
        &lt;#if userparam?index_of(&quot;EC.&quot;)==0&gt;
        ${userparam?remove_beginning(&quot;EC.&quot;)}:${ctrl.getUserParam(userparam)}&lt;#if userparam_has_next&gt;,&lt;/#if&gt;
        &lt;/#if&gt;
        &lt;/#list&gt;
        &lt;/#if&gt;
    };
</code></pre>
<blockquote style="border-color: blue;"><p>&#x56FE;&#x8868;&#x6570;&#x636E;&#x52A0;&#x8F7D;</p></blockquote>

<p>&#x56FE;&#x8868;&#x6570;&#x636E;&#x52A0;&#x8F7D;&#x65F6;&#xFF1A;&#x629B;&#x51FA;beforeload&#x4E8B;&#x4EF6;&#x6574;&#x5408;&#x53C2;&#x6570;&#xFF0C;&#x5982;&#x679C;&#x5B9E;&#x4F53;&#x6570;&#x636E;&#x96C6;&#x6709;&#x9ED8;&#x8BA4;&#x4E3B;&#x6392;&#x5E8F;&#x65B9;&#x5411;&#x548C;&#x9ED8;&#x8BA4;&#x5206;&#x9875;&#x5927;&#x5C0F;&#x5219;&#x5C06;&#x5176;&#x6574;&#x5408;&#x5230;&#x53C2;&#x6570;&#x4E2D;&#xFF0C;&#x8C03;&#x7528;&#x90E8;&#x4EF6;&#x670D;&#x52A1;&#x67E5;&#x8BE2;&#x6570;&#x636E;&#xFF0C;&#x518D;&#x5C06;&#x67E5;&#x8BE2;&#x56DE;&#x6765;&#x7684;&#x5B9E;&#x4F53;&#x6570;&#x636E;&#x96C6;&#x8F6C;&#x5316;&#x4E3A;&#x56FE;&#x8868;&#x6570;&#x636E;&#x96C6;&#xFF0C;&#x6700;&#x540E;&#x4F7F;&#x7528;&#x56FE;&#x8868;&#x6570;&#x636E;&#x96C6;&#x53BB;&#x7ED8;&#x5236;&#x56FE;&#x8868;&#x3002;</p>
<pre><code class="lang-typescript">    /**
     * &#x83B7;&#x53D6;&#x56FE;&#x8868;&#x6570;&#x636E;
     * 
     * @returns {*} 
     * @memberof ${srfclassname(&apos;${ctrl.name}&apos;)}Base
     */
    public load(opt?:any) {
        let _this = this;
        const arg: any = { ...opt };
        const parentdata: any = {};
        this.$emit(&apos;beforeload&apos;, parentdata);
        Object.assign(arg, parentdata);
        Object.assign(arg,{viewparams:this.viewparams,page:0,size:1000});
        &lt;#if ctrl.getPSDEDataSet()??&gt;
        &lt;#assign appDataSet = ctrl.getPSDEDataSet() /&gt;
        &lt;#if appDataSet.getMajorSortDir()?? &amp;&amp; appDataSet.getMajorSortPSDEField()??&gt;
        Object.assign(arg,{sort: &apos;${appDataSet.getMajorSortPSDEField().getCodeName()?lower_case},${appDataSet.getMajorSortDir()?lower_case}&apos;});
        &lt;/#if&gt;
        &lt;#if appDataSet.getPageSize()?? &amp;&amp; appDataSet.getPageSize() != -1&gt;
        Object.assign(arg,{size:${appDataSet.getPageSize()?c}});
        &lt;/#if&gt;
        &lt;/#if&gt;
        this.service.search(this.fetchAction,JSON.parse(JSON.stringify(this.context)),arg,this.showBusyIndicator).then((res) =&gt; {
            if (res) {
               this.transformToBasicChartSetData(res.data,(codelist:any) =&gt;{_this.drawCharts(codelist)});
            }
        }).catch((error) =&gt; {
            console.error(error);
        });
    }
</code></pre>
<blockquote style="border-color: blue;"><p>&#x7ED8;&#x5236;&#x56FE;&#x8868;</p></blockquote>

<p>&#x8BE5;&#x90E8;&#x4EF6;&#x4F7F;&#x7528;echarts&#x63D2;&#x4EF6;&#x6765;&#x8FDB;&#x884C;&#x56FE;&#x8868;&#x7684;&#x7ED8;&#x5236;&#x3002;&#x5728;&#x7ED8;&#x5236;&#x4E4B;&#x524D;&#x82E5;echarts&#x56FE;&#x8868;&#x5BF9;&#x8C61;&#x8FD8;&#x672A;&#x5B58;&#x5728;&#xFF0C;&#x5219;&#x5C06;&#x56FE;&#x8868;div DOM&#x8282;&#x70B9;&#x4F5C;&#x4E3A;&#x53C2;&#x6570;&#x5BF9;echarts&#x56FE;&#x8868;&#x5BF9;&#x8C61;&#x8FDB;&#x884C;&#x521D;&#x59CB;&#x5316;&#xFF0C;&#x518D;&#x5BF9;&#x56FE;&#x8868;&#x6570;&#x636E;&#x96C6;&#x53C2;&#x6570;&#x505A;&#x5904;&#x7406;(&#x5BF9;&#x975E;&#x96F7;&#x8FBE;&#x56FE;&#x53C2;&#x6570;&#x505A;&#x7279;&#x6B8A;&#x5904;&#x7406;)&#xFF0C;&#x6700;&#x540E;&#x8C03;&#x7528;echarts&#x63D2;&#x4EF6;&#x65B9;&#x6CD5;&#x5BF9;&#x56FE;&#x8868;&#x91CD;&#x7ED8;&#x5E76;&#x81EA;&#x9002;&#x5E94;&#x6D4F;&#x89C8;&#x5668;&#x5927;&#x5C0F;&#x3002;</p>
<pre><code class="lang-typescript">    <span class="hljs-comment">/**
     * &#x7ED8;&#x5236;&#x56FE;&#x8868;
     * 
     * @returns {*} 
     * @memberof ${srfclassname(&apos;${ctrl.name}&apos;)}Base
     */</span>
    <span class="hljs-keyword">public</span> drawCharts(codelist:<span class="hljs-built_in">any</span>){
        <span class="hljs-keyword">if</span>(!<span class="hljs-keyword">this</span>.myChart){
          <span class="hljs-keyword">let</span> element:<span class="hljs-built_in">any</span> =  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-keyword">this</span>.chartId);
          <span class="hljs-keyword">this</span>.myChart = echarts.init(element);
        }
        <span class="hljs-keyword">let</span> _chartOption = <span class="hljs-keyword">this</span>.handleChartOPtion(codelist);
        <span class="hljs-keyword">this</span>.chartRenderOption = {..._chartOption};
        <span class="hljs-keyword">this</span>.myChart.setOption(_chartOption);
        <span class="hljs-keyword">this</span>.myChart.resize();
    }
</code></pre>
<blockquote style="border-color: blue;"><p>&#x8865;&#x5168;&#x6570;&#x636E;&#x96C6;</p></blockquote>

<p>&#x6570;&#x636E;&#x5E8F;&#x5217;&#x914D;&#x7F6E;&#x4E2D;&#x4E00;&#x5171;&#x6709;&#x5E74;/&#x5B63;&#x5EA6;/&#x6708;&#x4EFD;/&#x5E74;&#x5468;/&#x65E5;/&#x4EE3;&#x7801;&#x8868;6&#x79CD;&#x5206;&#x7EC4;&#x6A21;&#x5F0F;&#xFF0C;&#x5728;&#x8865;&#x5168;&#x6570;&#x636E;&#x96C6;&#x65F6;&#xFF0C;&#x6839;&#x636E;&#x5206;&#x7EC4;&#x6A21;&#x5F0F;&#x7684;&#x4E0D;&#x540C;&#x6709;&#x4E0D;&#x901A;&#x7684;&#x8865;&#x5168;&#x65B9;&#x5F0F;&#xFF0C;&#x5176;&#x4E2D;&#x4EE3;&#x7801;&#x8868;&#x5206;&#x7EC4;&#x6A21;&#x5F0F;&#x91CC;&#x83B7;&#x53D6;&#x5BF9;&#x5E94;&#x5E8F;&#x5217;&#x7684;&#x4EE3;&#x7801;&#x8868;&#x5E76;&#x5BF9;&#x5206;&#x7C7B;&#x5B9E;&#x73B0;&#x5206;&#x7EC4;&#xFF1B;&#x65E5;&#x671F;&#x7C7B;&#x578B;&#x5206;&#x7EC4;&#x6A21;&#x5F0F;&#x91CC;&#x9488;&#x5BF9;&#x4E0D;&#x540C;&#x65E5;&#x671F;&#x7C7B;&#x578B;&#x4F7F;&#x7528;moment&#x63D2;&#x4EF6;&#x8FDB;&#x884C;&#x4E0D;&#x540C;&#x5904;&#x7406;&#x3002;</p>
<pre><code class="lang-typescript">    <span class="hljs-comment">/**
     * &#x8865;&#x5168;&#x6570;&#x636E;&#x96C6;
     * 
     * @param {Array&lt;any&gt;} data &#x4F20;&#x5165;&#x6570;&#x636E;
     * @param {Array&lt;any&gt;} item &#x5355;&#x4E2A;&#x5E8F;&#x5217;
     * @param {Array&lt;any&gt;} allCodeList &#x6240;&#x6709;&#x7684;&#x4EE3;&#x7801;&#x8868;
     * 
     * @memberof ${srfclassname(&apos;${ctrl.name}&apos;)}Base
     */</span>
    <span class="hljs-keyword">public</span> completeDataSet(data:<span class="hljs-built_in">any</span>,item:<span class="hljs-built_in">any</span>,allCodeList:<span class="hljs-built_in">any</span>){
        <span class="hljs-comment">// &#x5206;&#x7EC4;&#x5C5E;&#x6027;</span>
        <span class="hljs-keyword">let</span> groupField = item.dataSetFields.find((datasetField:<span class="hljs-built_in">any</span>) =&gt;{
            <span class="hljs-keyword">return</span> datasetField.name === item.categorField;
        });
        <span class="hljs-keyword">if</span>(<span class="hljs-built_in">Object</span>.is(groupField.groupMode,<span class="hljs-string">&quot;&quot;</span>)){
            <span class="hljs-keyword">return</span>;
        }
        <span class="hljs-comment">//&#x5206;&#x7EC4;&#x6A21;&#x5F0F;&#x4E3A;&#x4EE3;&#x7801;&#x8868;&#xFF08;&#x8865;&#x503C;&#xFF09;</span>
        <span class="hljs-keyword">if</span>(<span class="hljs-built_in">Object</span>.is(groupField.groupMode,<span class="hljs-string">&apos;CODELIST&apos;</span>)){
            <span class="hljs-keyword">this</span>.completeCodeList(data,item,allCodeList);
        }
        <span class="hljs-comment">//&#x5206;&#x7EC4;&#x6A21;&#x5F0F;&#x4E3A;&#x5E74;/&#x5B63;&#x5EA6;/&#x6708;&#x4EFD;&#xFF08;&#x6700;&#x5927;&#x503C;&#xFF0C;&#x6700;&#x5C0F;&#x503C;&#xFF0C;&#x5206;&#x7EC4;&#xFF0C;&#x8865;&#x503C;&#xFF09;</span>
        <span class="hljs-keyword">if</span>(<span class="hljs-built_in">Object</span>.is(groupField.groupMode,<span class="hljs-string">&quot;YEAR&quot;</span>) || <span class="hljs-built_in">Object</span>.is(groupField.groupMode,<span class="hljs-string">&quot;QUARTER&quot;</span>) || <span class="hljs-built_in">Object</span>.is(groupField.groupMode,<span class="hljs-string">&quot;MONTH&quot;</span>) || <span class="hljs-built_in">Object</span>.is(groupField.groupMode,<span class="hljs-string">&quot;YEARWEEK&quot;</span>)  || <span class="hljs-built_in">Object</span>.is(groupField.groupMode,<span class="hljs-string">&quot;DAY&quot;</span>)){
            <span class="hljs-keyword">this</span>.handleTimeData(data,item,allCodeList,groupField);
        }
    }
</code></pre>

                                
                                </section>
                            
    </div>
    <div class="search-results">
        <div class="has-results">
            
            <h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
            <ul class="search-results-list"></ul>
            
        </div>
        <div class="no-results">
            
            <h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
            
        </div>
    </div>
</div>

                        </div>
                    </div>
                
            </div>

            
                
                <a href="GANTT.html" class="navigation navigation-prev " aria-label="Previous page: 甘特图部件">
                    <i class="fa fa-angle-left"></i>
                </a>
                
                
                <a href="SELECTVIEWPANEL.html" class="navigation navigation-next " aria-label="Next page: 选择视图面板">
                    <i class="fa fa-angle-right"></i>
                </a>
                
            
        
    </div>

    <script>
        var gitbook = gitbook || [];
        gitbook.push(function() {
            gitbook.page.hasChanged({"page":{"title":"数据图表","level":"2.3.27","depth":2,"next":{"title":"选择视图面板","level":"2.3.28","depth":2,"path":"CTRLS/SELECTVIEWPANEL.md","ref":"./CTRLS/SELECTVIEWPANEL.md","articles":[]},"previous":{"title":"甘特图部件","level":"2.3.26","depth":2,"path":"CTRLS/GANTT.md","ref":"./CTRLS/GANTT.md","articles":[]},"dir":"ltr"},"config":{"gitbook":"*","theme":"default","variables":{},"plugins":[],"pluginsConfig":{"highlight":{},"search":{},"lunr":{"maxIndexSize":1000000,"ignoreSpecialCharacters":false},"sharing":{"facebook":true,"twitter":true,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"fontsettings":{"theme":"white","family":"sans","size":2},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"}},"file":{"path":"CTRLS/DATACHART.md","mtime":"2020-10-27T06:11:11.667Z","type":"markdown"},"gitbook":{"version":"3.2.3","time":"2020-11-02T06:38:45.289Z"},"basePath":"..","book":{"language":""}});
        });
    </script>
</div>

        
    <script src="../gitbook/gitbook.js"></script>
    <script src="../gitbook/theme.js"></script>
    
        
        <script src="../gitbook/gitbook-plugin-search/search-engine.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-search/search.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-lunr/lunr.min.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-lunr/search-lunr.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-sharing/buttons.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-fontsettings/fontsettings.js"></script>
        
    

    </body>
</html>

